<template>
  <div class="logistics">
    <div class="header acea-row row-between row-top">
      <div class="pictrue"><img :src="cartInfo[0].productInfo.image" /></div>
      <div class="text acea-row row-between">
        <div class="name line2">
          {{ orderInfo.delivery_name }} : {{ orderInfo.delivery_id }} (运单号)
        </div>
        <!-- <div class="money">
          <div>￥{{ cart.truePrice }}</div>
          <div>x{{ cart.cart_num }}</div>
        </div> -->
      </div>
    </div>
    <div class="line20"></div>
    <div class="logisticsCon">
      <!-- <div class="company acea-row row-between-wrapper">
        <div class="picTxt acea-row row-between-wrapper">
          <div class="iconfont icon-wuliu"></div>
          <div class="text">
            <div>
              <span class="name line1">物流公司：</span>
              {{ orderInfo.delivery_name }}
            </div>
            <div class="express line1">
              <span class="name">快递单号：</span> {{ orderInfo.delivery_id }}
            </div>
          </div>
        </div>
        <div
          class="copy acea-row row-center-wrapper copy-data"
          :data-clipboard-text="orderInfo.delivery_id"
        >
          复制单号
        </div>
      </div> -->
      <div class="item" v-for="(express, index) in expressList" :key="index">
        <div class="circular" :class="index === 0 ? 'on' : ''"></div>
        <div class="text">
          <div :class="index === 0 ? 'font-color-black' : ''">
            {{ express.status }}
          </div>
          <div class="data">{{ express.time }}</div>
        </div>
      </div>
    </div>
    <!-- <div class="padding1" v-if="!loaded || expressList.length"></div> -->
    <div class="no-express" v-if="loaded && !expressList.length">
      <img src="@assets/images/noExpress.png" />
      <p class="txt">暂无物流信息哦~</p>
    </div>
    <!-- <noData></noData> -->
  </div>
</template>
<script>
//  import noData from "@components/noData";
// import ClipboardJS from "clipboard";
import { express } from "@api/order";

const NAME = "Logistics";

export default {
  name: NAME,
  components: {
   
  },
  data: function() {
    return {
      show:'1',
      id: this.$route.params.id,
      cartInfo: [],
      orderInfo: {},
      expressList: [],
      // expressList: [
      //   {
      //     time: "2018-03-09 11:59:26",
      //     status:
      //       "【石家庄市】快件已在【长安三部】 签收,签收人: 本人,感谢使用中通快递,期待再次为您服务!"
      //   },
      //   {
      //     time: "2018-03-09 09:03:10",
      //     status:
      //       "【石家庄市】 快件已到达 【长安三部】（0311-85344265）,业务员 容晓光（13081105270） 正在第1次派件, 请保持电话畅通,并耐心等待"
      //   },
      //   {
      //     time: "2018-03-08 23:43:44",
      //     status: "【石家庄市】 快件离开 【石家庄】 发往 【长安三部】"
      //   },
      //   {
      //     time: "2018-03-08 21:00:44",
      //     status: "【石家庄市】 快件到达 【石家庄】"
      //   },
      //   {
      //     time: "2018-03-07 01:38:45",
      //     status: "【广州市】 快件离开 【广州中心】 发往 【石家庄】"
      //   },
      //   {
      //     time: "2018-03-07 01:36:53",
      //     status: "【广州市】 快件到达 【广州中心】"
      //   },
      //   {
      //     time: "2018-03-07 00:40:57",
      //     status: "【广州市】 快件离开 【广州花都】 发往 【石家庄中转】"
      //   },
      //   {
      //     time: "2018-03-07 00:01:55",
      //     status:
      //       "【广州市】 【广州花都】（020-37738523） 的 马溪 （18998345739） 已揽收"
      //   }
      // ],
      loaded: false
    };
  },
  watch: {
    $route(n) {
      if (n.name === NAME && this.$route.params.id !== this.id) {
        this.id = this.$route.params.id;
        this.getExpress();
      }
    }
  },
  mounted: function() {
    this.getExpress();
  },
  methods: {
    getExpress() {
      if (!this.id) return this.$dialog.error("订单不存在");
      this.loaded = false;
      express(this.id)
        .then(res => {
          const result = res.data.express.result || {};
          this.cartInfo = res.data.order.cartInfo;
          this.orderInfo = res.data.order;
          this.expressList = result.list || [];
          this.loaded = true;
          // this.$nextTick(function() {
          //   var copybtn = document.getElementsByClassName("copy-data");
          //   const clipboard = new ClipboardJS(copybtn);
          //   clipboard.on("success", () => {
          //     this.$dialog.success("复制成功");
          //   });
          // });
        })
        .catch(e => {

          //加载失败
           this.$dialog.error(e.msg || "加载失败");
        });
    }
  }
};
</script>

<style scoped>
.logistics .header {
  height: 2.6rem;
  box-sizing: border-box;
  padding: 0.4rem 0.3rem;
}
.logistics .header .pictrue {
  width: 1.8rem;
  height: 1.8rem;
  border:1px solid rgba(0,0,0,0.1);
  border-radius: 0.16rem;
  overflow: hidden;
}
.logistics .header .text {
  width: 4.8rem;
  align-items: center;
  margin-top: 0.7rem;
  font-size: 0.26rem;
  color: black;
}
.logistics .header .text .name {
  width: 4.8rem;
}
.line20 {
  width: 100%;
  height: 0.2rem;
  background: rgba(0, 0, 0, 1);
  opacity: 0.04;
}
.logistics .logisticsCon {
  margin: 0 auto;
  padding-top: 0.4rem;
}
/* .padding1{
  height: 1rem;
} */
.font-color-black {
  color: black !important;
}
.logistics .logisticsCon .item .text {
  color: rgba(0, 0, 0, 0.5);
  padding-bottom: 0.78rem;
  line-height: .36rem;
  border-left: 1px solid #FC404A;
}
.logistics .logisticsCon .item:last-child .text {
  border: 0;
}
.logistics .logisticsCon .item .text .data {
  font-size: 0.2rem;
  color: rgba(0, 0, 0, 0.5);
}
.logistics .logisticsCon .item .circular{
  width:.1rem;
  height: .1rem;
  top: .02rem;
  left: 0.365rem;
  background-color: #FC404A;
}
.logistics .logisticsCon .item .circular.on{
  
  background:url('../../assets/images/logisticsIcon.png') no-repeat;
  background-size: 100% 100%;
  width: .22rem;
  height: .22rem;
  left:0.3rem;
  top:-0.02rem;
}
.no-express {
  margin: 1.5rem 0;
}

.no-express img {
  width: 4rem;
  margin: 0 auto;
  display: block;
}
.no-express .txt{
    font-size: .24rem;
    color: rgba(0, 0, 0, .4);
    text-align: center;
    letter-spacing:.01rem;
}
</style>
